<template>
  <div>
    <ul class="ul_userForm">
      <li>
        <i>昵称:</i>
        <span>{{userForm.userName}}</span>
      </li>
      <li>
        <i>密码:</i>
        <span>{{userForm.password}}</span>
      </li>
      <li>
        <i>生日:</i>
        <span>{{userForm.Birthday}}</span>
      </li>
      <li>
        <i>年龄:</i>
        <span>{{userForm.age}}</span>
      </li>
      <li>
        <i>性别:</i>
        <span>{{userForm.sex}}</span>
      </li>
      <li>
        <i>职业:</i>
        <span>{{userForm.job}}</span>
      </li>
      <li>
        <i>爱好:</i>
        <span>{{userForm.like}}</span>
      </li>
      <li>
        <i>注册时间:</i>
        <span>{{userForm.createdTime | date}}</span>
      </li>
      <el-button type="text" @click="putUserFormVisible = true">修改个人信息</el-button>
    </ul>
    <el-dialog title="修改个人信息" :visible.sync="putUserFormVisible">
      <el-form>
        <el-form-item :label="'账号: '">
          <el-input type="text" placeholder="用户账号" v-model="userForm.userName"></el-input>
        </el-form-item>
        <el-form-item :label="'密码: '">
          <el-input type="password" placeholder="用户密码" v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item :label="'生日: '">
          <el-input type="text" placeholder="生日,比如格式'2000-10-7'" v-model="userForm.Birthday"></el-input>
        </el-form-item>
        <el-form-item :label="'年龄: '">
          <el-input type="text" placeholder="年龄Age" v-model="userForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-radio v-model="userForm.sex" label="男">男</el-radio>
          <el-radio v-model="userForm.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item :label="'职业: '">
          <el-input type="text" placeholder="比如您是个学生" v-model="userForm.job" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="'喜好: '">
          <el-input
            type="textarea"
            :rows="2"
            maxlength="30"
            show-word-limit
            placeholder="请输入您的个人喜好,比如喜欢汉服"
            v-model="userForm.like"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="putUserFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitInformation">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "userInformation",
  data() {
    return {
      putUserFormVisible: false,
      userForm: {
        Birthday: "",
        age: "",
        createdTime: Date.now(),
        job: "",
        like: "",
        passWord: "",
        password: "",
        sex: "",
        userName: "",
        _id: ""
      }
    };
  },
  methods: {
    submitInformation() {
      this.$store.dispatch("putUserInformation", this.userForm).then(res => {
        console.log(res);
        if (res.ok === 1) {
          this.getUserInformation();
          this.putUserFormVisible = false;
          this.$message({
            message: "修改成功",
            type: "success"
          });
        }
      });
    },
    getUserInformation() {
      this.$store
        .dispatch("getUserInformation", this.$store.state.user.user_id)
        .then(res => {
          this.userForm = res.data;
        });
    }
  },
  mounted() {
    this.getUserInformation();
  }
};
</script>

<style lang="scss" scoped>
.ul_userForm {
  width: 40rem;
  background: rgba(182, 248, 204, 0.2);
  border-radius: 1rem, 0.5rem;
  padding: 1rem;
  li {
    margin: 1.5rem;
    font-size: 2rem;
    i {
      font-style: normal;
      color: rgb(79, 200, 216);
    }
    span {
      background: rgba(170, 224, 231, 0.1);
      color: rgb(240, 139, 114);
      padding: 0.5rem;
      margin-left: 1rem;
    }
  }

  .el-icon-edit {
    color: white;
  }
}
</style>